<template>
    <div>
        <m-list-card icon="menu" title="新闻资讯" :Cats="newsCats">
                <template #items="{category}" >
                    <router-link tag="div" 
                    v-for="(news,key) in category.newsList" 
                    :key="key" 
                    class="pt-3 d-flex"
                    :class="{'text-grey':$store.getters.isListed(news._id)}"
                    :to="`/main/article/${news._id}`"
                    @click.native="addListed(news._id)">
                        <span class="category text-cate">[{{news.categoryName}}]</span>
                        <span class="split px-1">|</span>
                        <span class="title flex-1 text-ellipsis pr-2">{{news.title}}</span>
                        <span class="time">{{news.createdAt | date}}</span>
                    </router-link>
                </template>
            </m-list-card>
    </div>
</template>

<script>
    export default {
        props:{
            newsCats:{
                type:Array,
                default(){
                    return []
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>